//
//  PokeManInfoPannel.swift
//  PokeMaster
//
//  Created by 李腾芳 on 2022/1/8.
//  Copyright © 2022 OneV's Den. All rights reserved.
//

import SwiftUI
import Kingfisher

struct PokeManInfoPannel: View {
    let model: PokemonViewModel
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 3)
                .frame(width: 40, height: 6)
                .background(Color.gray)
            HStack(spacing: 18)  {
                Image("Pokemon-\(model.id)")
               // KFImage(model.iconImageURL)
                    .resizable()
                    .frame(width: 68, height: 68)
                VStack {
                    Text(model.name)
                        .font(SwiftUI.Font.system(size: 22).bold())
                        .foregroundColor(model.color)
                    Text(model.nameEN)
                        .font(Font.system(size: 13).bold())
                        .foregroundColor(model.color)
                    Text(model.genus)
                        .font(Font.system(size: 13).bold())
                        .foregroundColor(Color.gray)
                        .padding(SwiftUI.Edge.Set.top, 10)
                }
                Rectangle()
                    .frame(width: 1, height: 44)
                    .background(Color(hex: 0x000000, alpha: 0.1))
                VStack {
                    HStack {
                        Text("身高")
                            .font(Font.system(size: 11))
                            .foregroundColor(Color.gray)
                        Text(model.height)
                            .font(Font.system(size: 11))
                            .foregroundColor(model.color)
                    }
                    HStack {
                        Text("体重")
                            .font(Font.system(size: 11))
                            .foregroundColor(Color.gray)
                        Text(model.weight)
                            .font(Font.system(size: 11))
                            .foregroundColor(model.color)
                    }
                    HStack {
                        ForEach(model.types) { type in
                            Text(type.name)
                                .foregroundColor(Color.red)
                                .font(Font.system(size: 11))
                                .frame(width: 36, height: 14)
                                .background(type.color)
                                .cornerRadius(7)
                            
                        }
                    }
                }
            }
            VStack(alignment: HorizontalAlignment.leading, spacing: 12) {
                Text(model.descriptionText)
                Rectangle()
                    .frame(height: 1)
                Text("技能")
                ForEach(model.pokemon.abilities) { ability in
                    let viewModel = AbilityViewModel(ability: Ability.sample(url: ability.id))
                    Text(viewModel.name)
                        .foregroundColor(model.color)
                    Text(viewModel.descriptionText)
                }
            }
            
        }
        .padding(SwiftUI.EdgeInsets(top: 0, leading: 12, bottom: 0, trailing: 12))
        .background(Color.white)
    }
}

struct PokeManInfoPannel_Previews: PreviewProvider {
    static var previews: some View {
        PokeManInfoPannel(model: PokemonViewModel.sample(id: 1))
    }
}
